<template> 
    <div class="gouwu">
 
     <div >
      <div class="top" >
         <h2>已选商品</h2>
         <h2 @click="clear">清空</h2>
     </div>
      <ul>
            <li v-for="(item,index) in $store.state.gouwulist" :key="index">
              <img :src="item.picture" alt="">
              <div class="li_right" >
                  <h5>{{item.name}}</h5>
                  <div class="di">
                    <span>￥{{parseInt(item.min_price*item.count)}}</span>
                      <div>
                        <button class="jian" @click="jiangou(item.id)">-</button>
                        <span class="shuliang">{{item.count}}</span>
                        <button class="jia" @click="jiajia(item.id)">+</button>

                      </div>
                  </div>
              </div>
            </li>
          </ul>
     </div>
          
      </div>
  
</template>

<script>
import {gouwujian,cleargouwuche,gouwujia} from '../../api/index'
export default {
    data(){
      return {
      list:[],
      }
    },
    computed:{
    
    },
    methods:{
        
  
        jiajia(id){
        gouwujia({userid:localStorage.getItem("userid"),goodid:id}).then(res=>{
          console.log(res.data)
            this. lista()
        })
           
         
        },
        lista(){
              let userid=localStorage.getItem("userid")
              this.$store.dispatch('addTask',userid)
              // this.$store.dispatch('addTask',userid)
          
        },
        jiangou(id){
          gouwujian({userid:localStorage.getItem("userid"),goodid:id}).then((ok)=>{
                  console.log(ok);
                    this. lista()
                    
          })
        },
        clear(){
          console.log("我走了")
        cleargouwuche({userid:localStorage.getItem("userid")}).then((ok)=>{
                  console.log(ok);
                    this. lista()
                    
          })
        }
     
    },
    mounted(){
      this. lista()

    }
}
</script>

<style scoped>
.top{
  display: flex;
  justify-content: space-around;
}
.list{
  margin: 50px;
}
.shuliang{
  margin: 10px;
}
li{
  width: 100%;
  display: flex;
    justify-content: space-around;
}
.gouwu img{
  width: 30%;
}
.jian{
  border-radius:50% ;
  background: #ffffff;
  color: #05a7ff;
}
.jia{
  border-radius:50% ;
  background: #00a6ff;
  color: white;
}
footer{
  position: relative;
}
.dingwei {
  position: absolute;

}
.li_right{
  width: 70%;
}
.di{
  display: flex;
  justify-content: space-around;
}

</style>